<template>
  <div>
    <input v-focus type="text" placeholder="请输入内容">
    <div v-color = color>这是一段文字</div>
    <button @click="color = 'red' ">点我变红色</button>
  </div>
</template>

<script>
export default {
  directives :{
    // 局部指令
    focus: {
      inserted(el){
        el.focus()

      }
    },
    color: {
      inserted(el,binding) {
        el.style.color = binding.value
      },
      update(el,{value}) {
        el.style.color = value
      }
    }
    

  },


  data() {
    return {
      color:'yellowgreen'
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>